<template>
  <div class="page">
    <m-header :title="langText&&langText.assetbreakdown" :canback="Boolean(1)"></m-header>
    <div class="body">
      
      <div class="top">
        <div :class="{green:num==0}" @click="changeType('usdt',0)">{{langText&&langText.usdt}}</div>
        <div :class="{green:num==1}" @click="changeType('fc',1)">{{langText&&langText.fc}}</div>
        <div :class="{green:num==2}" @click="changeType('lock_fc',2)">{{langText&&langText.lockfc}} </div>
      </div>

      <div class="bot" v-lazy-load="lazyLoad" >
        <table>
          <tr>
            <th>{{langText&&langText.type}}</th>
            <th>{{langText&&langText.quantity}}</th>
            <th>{{langText&&langText.time}}</th>
          </tr>
          <tr v-for="(item,index) in list" :key="index">
            <td>{{item.project}}</td>
            <td>{{item.num}}</td>
            <td v-if="num !=2">{{item.createtime}}</td>
            <td v-else>{{formatTime(item.createtime).substring(0,10)}}</td>
          </tr>
        </table>
      </div>

  

    </div>
  </div>
</template>
<script>
import navItem from "@/components/order-nav-item.vue";
import { Owner } from "@/server/server.js";
import { Load,Util } from "@/assets/commonjs/utils.js";
import { mapGetters } from "vuex";
import { MyTxt } from "@/assets/commonjs/lan.js";
export default {
  data() {
    return {
      allTxt:null,
      page:1,
      screenHeight: 667,
      langText:null,
      num:0,
      list:[],
      type:'usdt'
    };
  },
  computed: {
    ...mapGetters(["lang",'getLangId'])
  },
  created() {
    
  },
  mounted() {
    this.myAssetsDetail();
    this.screenHeight = window.screen.availHeight || window.screen.height;
    this.initData();
  },
  methods: {
    initData(){
      this.allTxt = Object.assign({},MyTxt)
      this.langText = Object.assign({},JSON.parse(localStorage.getItem('mineData')))
    },
    formatTime(time){
      return Util.formatDate(time)
    },
    myAssetsDetail(){
      Owner.myAssetsDetail({type:this.type,page:this.page,num:10}).then(res=>{
        if(res.code==1){
          this.list = res.data.records;
        }else{
          mui.toast(res.msg)
        }
      })
    },
    changeType(type,num){
      this.num = num;
      this.type = type;
      this.myAssetsDetail();
    },
    lazyLoad() {
      this.page = this.page + 1;
      if (!this.noMore) {
        this.exchangeRecord();
      }
    },
  },
  components: {
    navItem
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  //   padding: @margin-primary;
  background-color: @bg-color;
  .top{
    width: 100%;
    background-color: #fff;
    height: 88px;
    line-height: 88px;
    display: flex;
    justify-content: space-between;
    text-align: center;
    >div{
      width: 33.3%;
      font-size:32px;
      color:rgba(102,102,102,1);
    }
    
    .green{
      color: #4EB6AD;
      position: relative;
      &::before{
        content: '';
        width: 68px;
        height: 4px;
        position: absolute;
        bottom: 0;
        background-color: #4EB6AD;
        left: 91px;
      }
    }
  }
  .bot{
    width: 710px;
    background-color: #fff;
    border-radius: 10px;
    margin: 20px;
    // text-align: center;
    padding-left: 20px;
    padding-bottom: 40px;
    table{
      width: 670px;
      font-size:24px;
      color:rgba(102,102,102,1);
      tr{
        display: flex;
        width: 100%;
        justify-content: space-between;
        &:nth-child(n+1){
          height: 55px;
          line-height: 55px;
          td{
              // flex: 1;
              width: 223px;              
              text-align: center;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
            &:first-child{
              border-left: 33px solid #fff;
            }
            &:nth-child(2){
              border-left: 15px solid #fff;
            }
            &:last-child{
              border-right: 30px solid #fff;
              color: #999;
            }
          }
        }
        
        &:nth-child(2){
            border-top: 15px solid #fff;
            height: 70px;
            line-height: 70px;
            // z-index: 1;
          td{
            // padding-top: 15px;
          }
          
        }
        &:first-child{
          height: 70px;
          line-height: 70px;
          font-size:32px;
          font-weight:550;
          color:rgba(51,51,51,1);
          border-bottom: 1px solid #DDDDDD;
          // z-index: 2;
          // padding: 0 27px 0 51px;
          th{
              flex: 1;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
            &:first-child{
              border-left: 47px solid #fff;
            }
            &:last-child{
              border-right: 51px solid #fff;
            }
          }
        }
      }
    }
  }
}
.page{
  /deep/ section .header .nav{
    background-color: #fff !important;
    span{
      color: #000;
    }
    .center{
      color: #000;
    }
  }
}
</style>